How do I add padding/margin?

ChancyRat

I spent all day learning the basics to make this happen. From the ground up, A-Z (or maybe A-C is where I am.

It's in the footer on the home page but I'm not sure where it will finally end up or consist of. Now, though, I'm stuck.

How can I add padding, or margin, or whatever it is called so that the transparent yellow on top of the flower image, has flowers on the top and bottom horizontal borders?

This is the best I could come up with.

Any other corrections you can spot would be gratefully welcomed.

<div class="footer">
<div style="font-size: 20px; padding: 15px; color: #000; margin-right: 20px;">
This is a text inside a div element.
We are still in the div element.
</div></div>

div.footer {
  background-color: #FBF2C9;
  opacity: 0.8;
  margin-left: auto ;
  margin-right: auto ;
  width: 820px;
  height: 260px;
  filter: alpha(opacity=80);
  /* For IE8 and earlier */
}

{
  background-image: url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ-S.jpg');
  background-repeat: repeat;
  /*  background-position: 50% 0, 50% 0 !important;
  */
}

EDIT: This is an HTML block inside the footer, in case that wasn't obvious.

racer

Best to add the style to your css, not the html

<div class="footer"></div>

No need for "div" in front of ".footer", you have margin twice, and best to use a gif or png instead of opacity. Margin "0 auto" centers, so now adjust the height and width. Padding or margin your top and bottom if needed

.footer {
font-size: 20px; 
padding: 0 auto; 
color: #000; 
background-color: #FBF2C9;    
margin: 0 auto;  
width: 805px;   
height: 245px;
opacity: 0.8;  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* For IE8 */
filter: alpha(opacity=80);   /* For IE5-7 */ 
}  

{   background-image: url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ-S.jpg');   
background-repeat: repeat; }

For the background you need to add the background element

ChancyRat

Todd, moving this:

<div class="footer"></div>

to the CSS, causes everything to fail.

Moving it back to HTML, and then trying to work with putting the flowers in a DIV, I now have this code. But the Blue should be on top of the flowers (it was on top but adding the DIV moved it to the background), and the margin is still missing from the top. There is also no transparency, but I did change the photo to .png.

<div class="footer">
<div class="flowers">
<div style="padding: 15px; margin-right: 20px;">
This is a text inside a div element.
We are still in the div element.
</div></div></div>

.footer {
  font-size: 40px;
  padding: 0 auto;
  color: gold;
  background-color: #1097FE;
  margin: 0 auto;
  width: 800px;
  height: 200px;
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  /* For IE8 */
  filter: alpha(opacity=90);
  /* For IE5-7 */ 
}

.flowers {
  background-image: url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ.jpg');
  background-repeat: repeat;
}

I realize my coding language is that of an infant but would you direct me towards a solution? Thanks.

ChancyRat

What I see:

Hikin' Mike

Very difficult to try to help since your site isn't unveiled yet. A few tings I noticed though. There is no 'auto' on padding. I would NOT use inline styles like this:

<div style="padding: 15px; margin-right: 20px;"> This is a text inside a div element. We are still in the div element. </div>

Better to use style the text in the .flower class.

Hikin' Mike

Just thinking out loud. You can just add your flower background in your .footer div.

ChancyRat

Hikin', thanks, but.... I'm clueless has to how to do what you suggest.

Hikin' Mike

HTML:
[html]
<div class="footer">
This is a text inside a div element. We are still in the div element.
</div>
[/html]CSS:

.footer {
    font-size: 40px;    
    color: gold;
    background: #1097FE url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ.jpg');
    padding: 15px;
    margin: 0 20px 0 auto;
    width: 800px;
    height: 200px;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /* For IE8 */
    filter: alpha(opacity=90);
    /* For IE5-7 */ 
}

ChancyRat

Thank you, Hikin'. But the transparent overlay is gone and I see only the flowers.
The flower image is a png now, as Todd instructed.
What will bring back the opacity of the blue on top?

Hikin' Mike

Sorry about that. I created a test page, so this worked on my page:

HTML:
[html]
<div class="footer">
<div class="flowers">
<p>This is a text inside a div element. We are still in the div element.</p>
</div>
</div>
[/html]

CSS:

.footer {
    background-color: #1097FE;
    width: 800px;
    height: 200px;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    /* For IE8 */
    filter: alpha(opacity=90);
    /* For IE5-7 */ 
    }
.footer p {
    font-size: 40px;
    color: gold;
    padding: 0 25px;
    }
.flowers {
    background-image: url('/photos/i-s4c2RzJ/1/S/i-s4c2RzJ.jpg');
    background-repeat: repeat;
    height: 200px;
    }

ChancyRat

Very very very kind of you to test the code. And, drum roll, it did not work on my site.
I saw only flowers and type. I changed the margins to see if the blue was behind the flowers, and it was.

The older code, I had to put the section in the order of overlay, so I took a chance and reversed both of them (html and css), and VOILA, I got it. Obviously have decisions to make on choice of image and color, but at least I can experiment now.

Did your test achieve an image like this, and why wouldn't the code do so for me?
Would you know how to center the blue within the flowers, all four borders? I also need to figure out why the typeface is not line spaced properly and has no padding from the top of the image.

Here's what I put:

<div class="flowers">
<div class="footer">
<p>This is a text inside a div element. We are still in the div element.</p>
</div>
</div>

.flowers {
background-image: url('/photos/i-cBW463K/0/O/i-cBW463K.png');
background-repeat: repeat;
width: 960px;
height: 200px;
}

.footer {
background-color: #1097FE;
width: 800px;
height: 180px;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
/* For IE8 */
filter: alpha(opacity=60);
/* For IE5-7 */
}

.footer p {
font-size: 40px;
color: gold;
padding: 0 25px;
}

Thank you for getting me on the right track. :ivar<img src="https://us.v-cdn.net/6029383/emoji/bowdown.gif&quot; border="0" alt="" >ivar

ChancyRat

I meant to attach the current image:

ChancyRat

Todd, your mysterious comment on opacity
Todd, you said, " best to use a gif or png instead of opacity".

So, does the code in my last comment, completely miss the point you are making?
W3S seems to interchange opacity and transparency in many places, so I am not tuning in to the point.

Are you saying I should make the Blue color, an image with transparency?

This might have been plain as day to everyone but me.

So - never use opacity as the code above does?

Thanks.

Hikin' Mike

Try this:

.flowers {
    background-image: url('/photos/i-cBW463K/0/O/i-cBW463K.png');
    background-repeat: repeat;
    }
.footer {
    background-color: #1097FE;
    opacity: 0.6;
    -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=6 0)";
    /* For IE8 */
    filter: alpha(opacity=60);
    /* For IE5-7 */
    }
.footer p {
    font-size: 40px;
    color: gold;
    padding: 0 25px;
    } 
[COLOR=Red].footer,
.flowers {
    width: 800px;
    height: 200px;
    }[/COLOR]

You need to make sure both .flowers and .footer has the same height/width (in red).

ChancyRat

You need to make sure both .flower and .footer has the same height/width (in red).

Hmm, I'm not clear. I don't want them the same. I'd like to see the flowers around the perimeter of the entire area. As if the flowers were a frame/border.

ChancyRat

I'm always too quick to publish.
So in the image above, I like the bottom border.
The right side "border" is too wide.
There is zero border on the left and top. I'd like there to be a border. Centered like a photo.

Hikin' Mike

I guess I don't understand what you're trying to accomplish then.

On your last example (image), is the flower supposed to be a border, with the blue centered?

ChancyRat

Hikin' Mike wrote: »

I guess I don't understand what you're trying to accomplish then.

On your last example (image), is the flower supposed to be a border, with the blue centered?

Exactly. Flowers are both a background to the blue, and a border on the outside of the blue.

Hikin' Mike

I can't replicate your image on my test page. Just guessing now:

.flowers {
    background-image: url('/photos/i-cBW463K/0/O/i-cBW463K.png');
    background-repeat: repeat;
    width: 960px;
    height: 200px;
    margin: 0 auto;
    }

.footer {
    background-color: #1097FE;
    width: 800px;
    height: 180px;
    margin: 0 auto;
    opacity: 0.6;
    -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=6 0)";
    /* For IE8 */
    filter: alpha(opacity=60);
    /* For IE5-7 */
    }

.footer p {
    font-size: 40px;
    color: gold;
    padding: 0 25px;
    } 

ChancyRat

You have gone above and beyond Mike, thanks.
I wonder why the code doesn't work for you? I guess that's neither here nor there.
I'm looking at this on FF 25.0.1 but I checked and both IE and Chrome show the same thing.

I have reverted the color to a pale yellow, and the text to a header which defaults to the site font of Buda in black.

Still missing the top "border" of flowers. I just think this is all very odd.

The image is reduced in size for DG's limit.

Hikin' Mike

Try this:

HTML
[html]
<div class="footer">
<div class="box">
<p>This is a text inside a div element. We are still in the div element.</p>
</div>
</div>
[/html]

CSS:

.footer {
    background-image: url('/photos/i-cBW463K/0/O/i-cBW463K.png');
    background-repeat: repeat;
    padding: 20px;
    }

.box {
    background: #f00;    
    opacity: 0.6;
    -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=6 0)";
    /* For IE8 */
    filter: alpha(opacity=60);
    /* For IE5-7 */    
    }
.footer, .box {
    width: 960px;
    height: 180px;
    margin: 0 auto;
    }
.box p {
    margin: 0;
    padding: 5px;    
    font-size: 25px;
    color: gold;
    }

ChancyRat

barbbarbbarb
That's all I have to say, Mike.


I wasn't able to get to this until I finished work this week, but it took me all of 2 seconds after work ended to get to try this.
THANK YOU.

I reduced the image to fit DG's limit.
The outer yellow border is my site's background color.

I don't know what image I will end up using, or color, but as for getting the code??? =
I'm so happy I can't breathe.

barbbarbbarbbarb

Hikin' Mike

ChancyRat wrote: »

barbbarbbarb
That's all I have to say, Mike.


I wasn't able to get to this until I finished work this week, but it took me all of 2 seconds after work ended to get to try this.
THANK YOU.

I reduced the image to fit DG's limit.
The outer yellow border is my site's background color.

I don't know what image I will end up using, or color, but as for getting the code??? =
I'm so happy I can't breathe.

barbbarbbarbbarb

Glad it worked!

ChancyRat

Hmmm, a side-effect I would like to not happen: I *think* the text adopts whatever opacity is set. How can I set this so that the text is always full/solid?

Hikin' Mike

ChancyRat wrote: »

Hmmm, a side-effect I would like to not happen: I *think* the text adopts whatever opacity is set. How can I set this so that the text is always full/solid?

Doesn't your legacy does the same thing?

ChancyRat

Hikin' Mike wrote: »

Doesn't your legacy does the same thing?

No, Mike. And I have a feeling that came from some ancient javascript that Jfriend wrote for me. It has trickled back to me - it was long ago.

ChancyRat

I used your code for another page in which there is a background, and paragraphs of text (like the link I sent you, that you referenced above). It was in seeing the outcome of this that I figured out the text fades. I also have a photograph embedded in the text, and it becomes opaque as well.
I 'fixed' this by removing the opacity but then that kind of defeats the purpose. It was in the midst of constructing this page that I remembered angel Jfriend's java.

Hikin' Mike

I'm not familiar with any Javascript on your Legacy site that would "fix" that. I copied your Legacy page to my test page and it looks the same.

ChancyRat

Hikin' Mike wrote: »

I'm not familiar with any Javascript on your Legacy site that would "fix" that. I copied your Legacy page to my test page and it looks the same.

You can see the javascript on my advanced customization section?

Hikin' Mike

ChancyRat wrote: »

You can see the javascript on my advanced customization section?

I'm not a Javascipt person, but I didn't see anything that would "fix" that. Here is my test page. The top one is the one I gave you, just changed the background and colors. The bottom is straight from your old page.

http://mike.imagesinthebackcountry.com/Test-Page/

ChancyRat

Thank you for pushing me on my memory, Mike.
Went back into DG's ancient history. My GOD Jfriend was a blessing.
So PLEASE smumug BRING HIM BACK by opening Java to his magical potion-making.

Anyway, grumble grumble, here is the thread on the subject:
http://www.dgrin.com/showthread.php?t=191786&highlight=background

and I did misremember about java. I think the piece I need to focus on is Jfriend's statement from message #19, which I don't follow, I need to settle and stare at the code (hopefully that is all I have to do, lol), but here it is fyi:

You can add an extra div and solve the issue.

<div class="myFrame">
<div class="backgroundContainer">
<div class="myText">
text here
</div>
</div>
</div>

Then, you put the background color on the background container div rather than on the myText div and the background can have a separate opacity for the background from the text.